<template>
  <div>
    <div class="local_auth_header">
        <div class="span"><span>安全管理</span></div>
    </div>
    
    <!-- <el-button @click="refreshLocalAuthList()">按钮</el-button>
    <el-button @click="refreshLocalAuthObj()">exist按钮</el-button> -->
    <div class="local_auth_wide_body">
        <div class="local_auth_narrow_body">
            <div class="local_auth_item_box">
                <div class="local_auth_label"><i class="el-icon-mobile-phone"></i><span>手机</span></div>
                <div class="local_auth_content" v-if="localAuthObj.phone.showStatus === 0">
                    <div><el-button type="success" circle icon="el-icon-plus" @click="doBind(localAuthObj.phone)"></el-button></div>
                </div>
                <div class="local_auth_content" v-if="localAuthObj.phone.showStatus === 1">
                    <div><div class="local_auth_type"><span>{{localAuthObj.phone.authContent}}</span></div></div>
                    <div><el-button type="danger" circle icon="el-icon-delete" @click="doBind(localAuthObj.phone)"></el-button></div>
                </div>
            </div>
            <div class="local_auth_item_box" >
                <div class="local_auth_label"><i class="el-icon-message"></i><span>邮箱</span></div>
                <div class="local_auth_content" v-if="localAuthObj.email.showStatus === 0">
                    <div><el-button type="success" circle icon="el-icon-plus"  @click="doBind(localAuthObj.email)"></el-button></div>
                </div>
                <div class="local_auth_content" v-if="localAuthObj.email.showStatus === 1">
                    <div><div class="local_auth_type"><span>{{localAuthObj.email.authContent}}</span></div></div>
                    <div><el-button type="danger" circle icon="el-icon-delete" @click="doBind(localAuthObj.email)"></el-button></div>
                </div>
            </div>
        </div>
    </div>
    <account-local-auth ref="accountLocalAuth" :getLocalAuthList='getLocalAuthList'></account-local-auth>
  </div>
</template>

<script>
import AccountLocalAuth from './account-local-auth'
  export default {
    components: {
        AccountLocalAuth,
    },
    mounted() {
        this.getLocalAuthList(); // 获取本地认证
    },
    computed:{
        localAuthObj: function(){
            var _obj = { phone:{authType:1,showStatus:0}, email:{authType:2,showStatus:0}, }
            var _list = this.localAuthList;
            for(var i = 0;i<_list.length;i++){
                if(_list[i].authType == 1){
                    _obj.phone = _list[i];
                }else if(_list[i].authType == 2){
                    _obj.email = _list[i];
                }
            }

            return _obj
        }
    },
    data() {
        return {
            uid: this.currentUser.user.uid,
            localAuthList:[],
            
        }
    },
    methods: {
        refreshLocalAuthList(){
            console.log("refreshLocalAuthList")
            this.getLocalAuthList();
/*
            this.localAuthList = [
                {
                    authContent: "17860971073",
                    authId: 1,
                    authType: 1,
                    overTime: "",
                    showStatus: 1,
                    uid: 1,
                    veriCode: "",
                }
            ]*/
        },
        refreshLocalAuthObj(){
            console.log('localAuthObj', this.localAuthObj)
        },
        getLocalAuthList(){
            this.$http1({
              url: this.$http.adornUrl(`/user/user/local/auth/info/${this.uid}`),
              method: "post",
            }).then(({ data }) => {
              this.$message({
                type: "success",
                message: "获取本地认证成功!",
              });
              this.localAuthList = data.list;
              console.log("本地认证", this.localAuthList)
            });
        },
        doBind(obj){
            console.log("dobind")
            this.$nextTick(() => {
                this.$refs.accountLocalAuth.init(obj)
            })
        }
    },
  }
</script>

<style>
.local_auth_header .span{
    margin: 10px 0;
    font-size: 18px;
}
.local_auth_wide_body{
    /* background: #58faf2; */
}
.local_auth_narrow_body{
    margin: 0 auto;
    width: 60%;
    /* background: #58faae; */
}
.local_auth_item_box{
    /* background: #65fa58; */
    margin-bottom: 10px;
    display: flex;
    height: 60px;
}

.local_auth_label{
    font-size: 20px;
    margin-top: 20px;
    width: 100px;
}
.local_auth_content{
    display: flex;
}
.local_auth_content .local_auth_type{
    font-size: 16px;
    margin-top: 22px;
    width: 180px
}
.local_auth_content .el-button{
    margin-top: 10px;
    
}
</style>